<template>
  <div class="header">
    <el-card class="search" shadow="never">
      <el-form :inline="true" :model="FormData" class="form-inline">
        <el-form-item label="型号搜索:">
          <el-input v-model="FormData.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="Search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 头部 -->
      <el-card shadow="never" class="result">
      <!--新增点位 按钮 -->
      <el-row class="operation">
        <el-button
          type="warning"
          class="el-button--second"
          icon="el-icon-circle-plus-outline"
          @click="addopen"
          >新建</el-button
        >
      </el-row>
      <!-- 表格区域 +  分页-->
     <el-table
      :header-cell-style="{
        background: '#f3f6fb',
        height: '42px',
        color: '#666',
        fontWeight: '400',
        border: 'none',
      }"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :row-style="{ height: '44px' }"
      :cell-style="{ padding: 0, border: 'none' }"
    >
      <el-table-column type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="name" label="型号名称" width="182">
      </el-table-column>
      <el-table-column prop="model" label="型号编码" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="" label="设备图片">
        <template #default="{ row }">
          <img style="display: block;width: 24px;height: 24px;border-radius: 50%;background: #f3f6fb;border: 1px solid #f3f6fb;" :src="row.image" alt="">
        </template>
      </el-table-column>
      <el-table-column
        prop="vmRow"
        label="货道行"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="vmCol" label="货道列" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="channelMaxCapacity" label="设备容量" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="" label="操作" width="150">
        <template #default="{ row }">
          <div class="">
            <el-button type="text" @click="update(row)">修改</el-button>
            <el-button type="text" style="color:#ff5a5a" @click="delType(row.typeId)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
      <!-- 分页 -->
       <el-pagination
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageIndex"
        :page-size="page.pageSize"
        layout="slot,prev, next"
        :total="page.totalCount"
      >
        <template>
          <span class="el-pagination__total"
            >共{{ page.totalCount }}条记录&nbsp;&nbsp;第&nbsp;{{
              page.pageIndex
            }}/{{ page.totalPage }}页</span
          >
        </template>
      </el-pagination>
      <!-- 分页 -->
    </el-card>
    <!-- 表格区域 -->
      <!--  -->
     <!-- -->
    <!-- 新建、修改弹窗 -->
    <el-dialog
      width="630px"
      height="579px"
      :title="title"
      :visible.sync="addVisible"
      @close="btnCancel"
    >
      <el-form ref="addForm" label-width="120px" :model="addForm" :rules="formRules">
        <el-form-item label="型号名称 : " prop="name">
          <el-input
            style="width:396px"
            type="text"
            placeholder="请输入"
            v-model="addForm.name"
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="型号编码 : " prop="model">
          <el-input
            style="width:396px"
            type="text"
            placeholder="请输入（限制数字、字母、中划线、下划线）"
            v-model="addForm.model"
            maxlength="15"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="货道行数 : " required prop="vmRow">
          <el-input-number style="width:396px" placeholder="请输入" v-model="addForm.vmRow" controls-position="right" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="货道列数 : " required prop="vmCol">
          <el-input-number style="width:396px" placeholder="请输入" v-model="addForm.vmCol" controls-position="right" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="货道容量 : " required prop="channelMaxCapacity">
          <el-input-number style="width:396px" placeholder="请输入" v-model="addForm.channelMaxCapacity" controls-position="right" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="设备图片 : " required prop="image">
          <div class="img">
            <el-upload
              accept=".jpg,.jpeg,.png,.JPG,.JPEG"
              class="avatar-uploader"
              name="fileName"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              >
              <img style="width:100%;height:100%" v-if="addForm.image" :src="addForm.image" class="avatar">
              <i v-else class="el-icon-plus"></i>
            </el-upload>
            <div style="font-size: 14px;color: #bac0cd;">支持扩展名jpg、png文件不得大于100kb</div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-bottom:10px">
        <el-button @click="btnCancel">取消</el-button>
        <el-button type="primary" @click="addSubmit"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { searchTypeTable, SaleTypeDetail, addSaleType, updateSaleType, delSaleType } from '@/api/deviceType'
export default {
  data () {
    return {
      // 搜索 表单
      FormData: {
        name: ''
      },
      // loading: false,
      // 搜索
      tableData: [],
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      addVisible: false, // 新增设备显示与隐藏
      type: [], // 新增时的型号
      node: [], // 新增时的点位
      addForm: {
        // 新增表单
        channelMaxCapacity: undefined, // 设备容量
        image: '', // 设备图片
        model: '', // 型号编码
        name: '', // 型号名称
        vmCol: undefined, // 货道列
        vmRow: undefined // 货道行
      },
      formRules: {
        channelMaxCapacity: [{ required: true, message: '请输入', trigger: 'blur' }],
        model: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        vmCol: [{ required: true, message: '请输入', trigger: 'blur' }],
        vmRow: [{ required: true, message: '请输入', trigger: 'blur' }],
        image: [{ required: true, message: '请上传', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.searchTypeTable()
  },
  methods: {
    async searchTypeTable () {
      // this.loading = true
      const res = await searchTypeTable({ ...this.page, name: this.FormData.name })
      console.log(res)
      this.tableData = res.currentPageRecords
      this.page.totalCount = Number(res.totalCount)
      this.page.totalPage = Number(res.totalPage)
    },
    Search () {
      this.searchTypeTable()
    },
    addopen () {
      this.addVisible = true
    },
    handleCurrentChange () {

    },
    handleAvatarSuccess () {

    },
    beforeAvatarUpload () {

    },
    // 删除
    async delType (id) {
      try {
        await delSaleType(id)
        this.$message.success('删除成功')
        this.getTableData() // 重新渲染数据
      } catch (err) {
        console.log(err)
      }
    },
    async updateNode () {
      const res = await updateSaleType(this.updateForm)
      console.log(res)
      this.updateVisible = false
      this.getTableData() // 重新渲染数据
    },
    // 修改设备信息
    async update (row) {
      console.log(row)
      this.addVisible = true
      this.addForm = await SaleTypeDetail(row.typeId)
    },
    btnCancel () {
      // 清空表单
      this.addVisible = false
    },
    // 新建确定
    async addSubmit () {
      try {
        await this.$refs.addForm.validate()
        if (this.addForm.typeId) {
          // 修改
          await updateSaleType(this.addForm)
        } else {
          // 新增
          await addSaleType(this.addForm) // 返回 true 或 false
        }
        // 重新渲染表格
        this.getTableData()
        // 关闭弹窗
        this.addVisible = false
      } catch (err) {
        console.log(err)
      }
    }
  },
  computed: {
    // 标题
    title () {
      return this.addForm.typeId ? '修改设备类型' : '新增设备类型'
    },
    vmStatus () {
      if (this.tableData.vmStatus === 0) {
        return '未投放'
      } else if (this.tableData.vmStatus === 1) {
        return '运营'
      } else {
        return '撤机'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  padding-left: 17px;
  .el-form {
    height: 36px;
    line-height: 36px;
    .el-button {
      width: 80px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
      .el-icon-search {
        margin-right: 5px;
      }
    }
  }
}
.el-pagination {
  display: flex;
  height: 96px;
  align-items: center;
  .el-pagination__total {
    flex: 1;
    font-size: 16px !important;
    color: #dbdfe5 !important;
  }
  ::v-deep button:disabled {
    color: #d8dde3;
    background: #edf0f9;
  }
  ::v-deep button {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }
}
</style>
